
import {Form, FormInstance, Input, Modal} from "antd";
import React, {useEffect, useState} from "react";
// @ts-ignore
function EditForm({onFormInstanceReady,user}){
	const [form] = Form.useForm();
	useEffect(() => {
		onFormInstanceReady(form);
	}, []);
	return (
		
		<Form layout={"horizontal"} form={form} labelCol={{ span: 4 }} wrapperCol={{ span: 12 }} size={"small"} initialValues={user}>
			<Form.Item
				name="username"
				label="用户名"
			>
				<Input readOnly disabled={true}/>
			</Form.Item>
			<Form.Item
				name="nickname"
				label="昵称"
				rules={[{ required: true, message: '昵称不能为空' }]}
			>
				<Input />
			</Form.Item>
			<Form.Item
				name="mobile"
				label="手机号"
				rules={[{ required: false}]}
			>
				<Input />
			</Form.Item>
			<Form.Item
				name="email"
				label="邮箱"
				rules={[{ required: false}]}
			>
				<Input />
			</Form.Item>
		</Form>
	)
}
// @ts-ignore
export default function EditModal({open,onEditCancel,onEditOk,user}){
	const [formInstance, setFormInstance] = useState<FormInstance>();
	return (
		<Modal title={"编辑"} okText={"确定"} cancelText={"取消"} okButtonProps={{ autoFocus: true }} destroyOnClose={true}
					 open={open} onCancel={onEditCancel}
					 onOk={async () => {
						 try {
							 const values = await formInstance?.validateFields();
							 // formInstance?.resetFields();
							 onEditOk(values);
						 } catch (error) {
							 console.log('Failed:', error);
						 }
					 }}>
			<EditForm
				user={user}	// @ts-ignore
				onFormInstanceReady={(instance) => {
					setFormInstance(instance);
				}}
			/>
		</Modal>
	);
}